<!DOCTYPE html>
<include file="public@storage"/>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>
<link rel="stylesheet" href="__STATIC__/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/js/echarts/echarts.min.js"></script>

<body style="height: 100%; margin: 0">

<div class="container body-content" style=" margin-top:20px; width: 100%">
    <div class="panel panel-info" style="margin-bottom: 0.5rem">
        <div class="panel-heading"><span id="storageName">{$storageInfo[0]['name']}</span>出入库物料排行榜前10</div>
        <input type="hidden" id="storageUuid" value="{$storageInfo[0]['uuid']}">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <select id="daySelect" class="btn btn-info" style="margin-left: 5px; width: 10rem">
                        <option value="3">3天内</option>
                        <option value="7">7天内</option>
                        <option value="15">15天内</option>
                        <option value="30">30天内</option>
                    </select>


                    <select id="storageSelect" class="btn btn-info" style="margin-left: 5px; width: 10rem">
                        <volist id="uuid" name="storageInfo" id="value">
                            <option value="{$value['uuid']}">{$value['name']}</option>
                        </volist>
                    </select>
                    <img src="__STATIC__\storage\fileinput\img\loading-sm.gif" id='p'>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="container" style="height: 100%"></div>


<script type="text/javascript">
    $(function () {
        var dayNum;
        var daySelect = $("#daySelect");
        daySelect.on('change', function () {
            dayNum = $("#daySelect").val();
            begin();
        });
        var storageUuid;
        var storageSelect = $("#storageSelect");
        storageSelect.on('change', function () {
            storageUuid = $("#storageSelect").val();
            begin();
        });
        var inflow_data;//入库件数的数据
        var outflow_data;//出库件数的数据
        //获取出库件数
        var days = [];
        if (typeof(dayNum) == "undefined") {
            dayNum = 3;
        }

        function begin() {
            $.ajax({
                type: "POST",//规定传输方式
                async: true,
                url: "{:url('storage/Charts/getInflowMaterielByDay')}?dayNum=" + dayNum + "&storageUuid=" + storageUuid,//提交URL
                // data: {'name':$('#name').val(),'age':$('#age').val()},//提交的数据
                beforeSend: function (r) {
                    $("#p").show();
                },
                success: function (result) {

                    inflow_data = result;
                    console.log('get inflow success');
                    console.log(inflow_data)
                    $.ajax({
                        type: "POST",//规定传输方式
                        async: true,
                        url: "{:url('storage/Charts/getOutflowMaterielByDay')}?dayNum=" + dayNum + "&storageUuid=" + storageUuid,//提交URL
                        // data: {'name':$('#name').val(),'age':$('#age').val()},//提交的数据
                        success: function (result) {
                            $("#p").hide();
                            outflow_data = result;
                            console.log("get outflow success");
                            console.log(outflow_data);
                            //获取入库件数
                            var dom = document.getElementById("container");
                            var myChart = echarts.init(dom);
                            var app = {};
                            option = null;


                            var builderJson = {
                                "charts": inflow_data,
                                "components": outflow_data
                            };


                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            canvas.width = canvas.height = 100;
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.globalAlpha = 0.08;
                            ctx.font = '20px Microsoft Yahei';
                            ctx.translate(50, 50);
                            ctx.rotate(-Math.PI / 4);
                            option = {
                                backgroundColor: {
                                    type: 'pattern',
                                    image: canvas,
                                    repeat: 'repeat'
                                },
                                tooltip: {},
                                title: [
                                    {
                                        text: "入库物料排行（件）",
                                        y: '3%',
                                        textStyle: {
                                            //文字颜色
                                            //字体风格,'normal','italic','oblique'
                                            fontStyle: 'normal',
                                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                            fontWeight: 'bold',
                                            //字体系列
                                            fontFamily: 'sans-serif',
                                            //字体大小
                                            fontSize: 14
                                        }
                                    }, {
                                        text: "出库物料排行（件）",
                                        y: '53%',
                                        textStyle: {
                                            //文字颜色
                                            //字体风格,'normal','italic','oblique'
                                            fontStyle: 'normal',
                                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                            fontWeight: 'bold',
                                            //字体系列
                                            fontFamily: 'sans-serif',
                                            //字体大小
                                            fontSize: 14
                                        }
                                    }],
                                grid: [{
                                    top: 50,
                                    bottom: '47%',
                                    left: 10,
                                    containLabel: true
                                }, {
                                    top: '57%',
                                    bottom: 0,
                                    left: 10,
                                    containLabel: true
                                }],
                                xAxis: [{
                                    type: 'value',
                                    max: builderJson.all,
                                    splitLine: {
                                        show: false
                                    }
                                }, {
                                    type: 'value',
                                    max: builderJson.all,
                                    gridIndex: 1,
                                    splitLine: {
                                        show: false
                                    }
                                }],
                                yAxis: [{
                                    type: 'category',
                                    data: Object.keys(builderJson.charts),
                                    axisLabel: {
                                        interval: 0,

                                    },
                                    splitLine: {
                                        show: false
                                    }
                                }, {
                                    gridIndex: 1,
                                    type: 'category',
                                    data: Object.keys(builderJson.components),
                                    axisLabel: {
                                        interval: 0,

                                    },
                                    splitLine: {
                                        show: false
                                    }
                                }],
                                series: [{
                                    type: 'bar',
                                    stack: 'chart',
                                    z: 3,
                                    label: {
                                        normal: {
                                            position: 'right',
                                            show: true
                                        }
                                    },
                                    data: Object.keys(builderJson.charts).map(function (key) {
                                        return builderJson.charts[key];
                                    })
                                },
                                    {
                                        type: 'bar',
                                        stack: 'component',
                                        xAxisIndex: 1,
                                        yAxisIndex: 1,
                                        z: 3,
                                        label: {
                                            normal: {
                                                position: 'right',
                                                show: true
                                            }
                                        },
                                        data: Object.keys(builderJson.components).map(function (key) {
                                            return builderJson.components[key];
                                        })
                                    }]
                            };
                            if (option && typeof option === "object") {
                                myChart.setOption(option, true);
                            }
                        }
                    });
                }
            });

        }

        begin();
    })

</script>
</body>
</html>